<template>
  <div class="app-container">
    <!-- 数据概览卡片区域 -->
    <el-row :gutter="20" class="mb-4">
      <!-- 本月营业额卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-title">本月营业额</div>
            <div class="stat-value">¥ 256,800</div>
            <div class="stat-trend positive">↑12.5%</div>
          </div>
        </el-card>
      </el-col>

      <!-- 日均客流量卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-title">日均客流量</div>
            <div class="stat-value">142 人</div>
            <div class="stat-trend negative">↓3.2%</div>
          </div>
        </el-card>
      </el-col>

      <!-- 菜品总数卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-title">菜品总数</div>
            <div class="stat-value">68 种</div>
            <div class="stat-trend">持平</div>
          </div>
        </el-card>
      </el-col>

      <!-- 会员总数卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-title">会员总数</div>
            <div class="stat-value">2,358 人</div>
            <div class="stat-trend positive">↑8.7%</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 可视化图表展示区域 -->
    <el-row :gutter="20">
      <!-- 营业额趋势折线图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-title">营业额趋势</div>
          </template>
          <EchartsWrapper :option="salesOption" />
        </el-card>
      </el-col>

      <!-- 订单来源饼图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-title">订单来源分布</div>
          </template>
          <EchartsWrapper :option="sourceOption" />
        </el-card>
      </el-col>

      <!-- 热门菜品销售柱状图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-title">热门菜品销售TOP5</div>
          </template>
          <EchartsWrapper :option="dishOption" />
        </el-card>
      </el-col>

      <!-- 库存预警水平柱状图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-title">库存预警分析</div>
          </template>
          <EchartsWrapper :option="inventoryOption" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import * as echarts from 'echarts'
import EchartsWrapper from '@/components/EchartsWrapper.vue';

// 营业额趋势配置（折线图）
const salesOption = ref({
  tooltip: { trigger: 'axis' }, // 鼠标悬停提示框
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] // X轴数据
  },
  yAxis: { type: 'value' }, // Y轴类型为数值
  series: [{
    data: [8200, 9320, 9010, 9340, 12900, 13300, 13200], // 数据系列
    type: 'line', // 折线图类型
    smooth: true, // 平滑曲线
    areaStyle: { // 区域填充样式
      color: {
        type: 'linear',
        x: 0, y: 0, x2: 0, y2: 1,
        colorStops: [{ // 渐变色配置
          offset: 0, color: 'rgba(64, 158, 255, 0.6)' // 起始颜色
        }, {
          offset: 1, color: 'rgba(64, 158, 255, 0)' // 结束颜色
        }]
      }
    }
  }]
});

// 订单来源分布配置（饼图）
const sourceOption = ref({
  tooltip: { trigger: 'item' }, // 数据项触发提示
  series: [{
    type: 'pie',
    radius: ['40%', '70%'], // 内外半径（环形图）
    data: [ // 饼图数据
      { value: 1048, name: '堂食' },
      { value: 735, name: '外卖' },
      { value: 580, name: '电话预订' },
      { value: 484, name: '会员系统' }
    ],
    emphasis: { // 高亮样式
      itemStyle: {
        shadowBlur: 10, // 阴影模糊
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
});

// 热门菜品销售配置（柱状图）
const dishOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['菲力牛排', '海鲜披萨', '龙虾浓汤', '蔬菜沙拉', '提拉米苏'] // 菜品名称
  },
  yAxis: { type: 'value' },
  series: [{
    data: [120, 200, 150, 80, 70], // 销售数量
    type: 'bar',
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // 柱状图渐变色
        { offset: 0, color: '#83bff6' }, // 顶部颜色
        { offset: 0.5, color: '#188df0' }, // 中间颜色
        { offset: 1, color: '#188df0' } // 底部颜色
      ])
    }
  }]
});

// 库存预警分析配置（水平柱状图）
const inventoryOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'value' }, // 数值轴在底部
  yAxis: {
    type: 'category', // 类目轴在左侧
    data: ['牛排', '龙虾', '黄油', '面粉', '橄榄油'] // 库存物品
  },
  series: [{
    type: 'bar',
    data: [50, 30, 15, 200, 8], // 库存数量
    itemStyle: {
      color: function(params) { // 动态颜色函数
        const colorList = ['#67C23A', '#E6A23C', '#F56C6C']; // 绿/橙/红
        const value = params.data;
        if (value < 20) return colorList[2]; // <20红色预警
        if (value < 50) return colorList[1]; // <50橙色警告
        return colorList[0]; // >=50绿色正常
      }
    }
  }]
});
</script>

<style scoped>
/* 统计卡片样式 */
.stat-card {
  margin-bottom: 20px;
  .stat-item {
    padding: 15px;
    .stat-title {
      color: #909399; /* 次文本颜色 */
      font-size: 14px;
    }
    .stat-value {
      font-size: 24px;
      margin: 10px 0;
      color: #303133; /* 主要文本颜色 */
    }
    .stat-trend {
      font-size: 12px;
      &.positive { color: #67c23a; } /* 正向趋势绿色 */
      &.negative { color: #f56c6c; } /* 负向趋势红色 */
    }
  }
}

/* 图表卡片样式 */
.chart-card {
  margin-bottom: 20px;
  .chart-title {
    font-size: 16px;
    font-weight: 500;
    color: #303133; /* 标题颜色 */
  }
}
</style>
